<script lang="ts">
import { h } from "vue";

export default {
   name: "breadcrumbItem",
   setup(props: any, context: any) {
      const children = context.slots.default()[0].children as string;
      const div = h("div", { class: "breadcrumb-item" });
      const a = h("a", { href: "#" + props.to }, children);
      const span = h("span", children);
      const i = h("i", { class: "iconfont icon-angle-right" });
      let breadcrumbItem: any = null;
      if (props.to) {
         breadcrumbItem = h(div, [a, i]);
      } else {
         breadcrumbItem = h(div, span);
      }
      return () => h(breadcrumbItem);
   },
   props: {
      to: {
         type: [String, Object],
         default: "",
      },
   },
};
</script>
